<template>
  <div class="winPanel kkModule noBlueBg">
    <div class="title">
      <span class="button" :class="{active:mode==='video'}" @click="mode='video'"
            v-if="Data.livePath || Data.videoPath">视频</span>
      <span class="button" :class="{active:mode==='image'}" @click="mode='image'" v-if="Data.imagePath">图片</span>
      <span class="close" @click="closePanel" title="关闭面板">×</span>
    </div>
    <div class="content">
      <div class="win">
        <div class="video" v-show="mode==='video'">
          <video :src="webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+Data.videoPath" autoplay controls loop
                 style="width: 100%; height: 100%;" v-if="Data['type']==='event' && Data.videoPath"></video>
          <video :src="webCfg.api.wsUrl+':'+webCfg.api.wsPort+'/'+Data.livePath" autoplay controls loop
                 style="width: 100%; height: 100%;"
                 v-else-if="Data['type']==='camera' && Data.livePath && webCfg.lineMode===1"></video>
          <FlvPlayer :url="Data.livePath" v-else></FlvPlayer>
        </div>
        <div class="image fitContain" v-show="mode==='image'" v-if="Data.imagePath">
          <img :src="Data.preData.source===2?Data.imagePath:webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+Data.imagePath" @click="viewBigImg($event)">
        </div>
      </div>

      <div class="cont">
        <ul class="item-ul">
          <li v-for="item in Data.items" :class="item.key" :key="item.key">
            <label>{{item.label}}</label>
            <span style="width: 10px; color: #aaa;">：</span>
            <span v-html="item.value" v-if="item.label==='位置'"></span>
            <span v-html="item.value" v-else></span>
          </li>
          <li class="btn">
            <div v-if="Data['type']==='event'">
              <el-button type="primary" size="mini" v-if="Data.state===1 && (identityId==='2'||identityId==='5')" @click="handleEvt(0)">稽
                核
              </el-button>
              <el-button type="success" size="mini" v-if="Data.event!=='-1' && Data.state===2 && (identityId==='2'||identityId==='5')" @click="handleEvt(1)">发 布
              </el-button>
              <el-button type="warning" size="mini" v-if="Data.event!=='-1' &&  Data.state===2 && (identityId==='2'||identityId==='5')" @click="handleEvt(2)">忽 略
              </el-button>

            </div>
            <div v-else>
              <el-button type="primary" size="mini"
                         v-if="Data['state']!=='0' && Data['stateTwo']===1 && (identityId==='2'||identityId==='5')"
                         @click="sendRepairOrder(2)">稽 核
              </el-button>
              <el-button type="success" size="mini"
                         v-if="Data['state']!=='0' && Data['stateTwo']===2 && (identityId==='2'||identityId==='5')"
                         @click="sendRepairOrder(3)">发 布
              </el-button>
              <el-button type="warning" size="mini"
                         v-if="Data['state']!=='0' && Data['stateTwo']===2 && (identityId==='2'||identityId==='5')"
                         @click="sendRepairOrder(0)">忽 略
              </el-button>
            </div>
          </li>
        </ul>

        <Dialog :cfg="dialogCfg" ref="dialog">
          <el-form label-width="90px" :model="formData" v-if="Data['type']==='event' && Data.state===1">
            <el-form-item label="事件：" class="input-width">
              <el-select v-model="formData.evtType" placeholder="请选择" size="mini">
                <el-option
                  v-for="(label,value) in evtTypes"
                  :key="value"
                  :label="label.indexOf('-')>-1?label.split('-')[1]:label"
                  :value="value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注：" class="input-width">
              <el-input v-model="formData.note" placeholder="请输入备注内容" size="mini"></el-input>
            </el-form-item>
          </el-form>

          <el-form ref="fun1Form" label-width="120px" v-if="Data['type']==='event'&& Data.state===2"
                   label-position="top" class="eventInfoBox" :model="fbFormData" :rules="fbRules">
            <el-form-item label="事件信息：">
              <div class="eventInfo">
                <label>位置：</label>{{Data.preData.bscCamera.name}}
              </div>
              <div class="eventInfo">
                <label>类型：</label>
                <output>{{dict['event'][Data.event]}}</output>
                <label>状态：</label>
                <output>已稽核</output>
                <label>时间：</label>
                <output>{{Data['preData']['detectedTime']}}</output>
              </div>
            </el-form-item>
            <el-form-item label="事件处理：" class="eventInfoBox2" prop="handle">
              <el-select v-model="fbFormData.handle" multiple  placeholder="请选择单位" size="mini" style="width: 100%">
                <el-option
                  v-for="item in orgData.center"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id.toString()">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="处理时限：" prop="expectTimeTwoNum">
              <el-select
                size="mini"
                v-model="fbFormData.expectTimeTwoNum"
                filterable
                default-first-option
                placeholder="请选择处理时限">
                <el-option
                  v-for="item in timeSpaces"
                  :key="item"
                  :label="item+'分钟'"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="备注：" prop="remark2">
              <el-input v-model="fbFormData.remark2"
                        placeholder="请输入备注内容" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </Dialog>

        <Dialog :cfg="dialogCfg" ref="cameraDialog">
          <el-form label-width="90px">
            <el-form-item label="故障类型：" class="input-width">
              <el-select v-model="cameraJh.type" placeholder="请选择" size="mini">
                <el-option
                  v-for="(label,value) in cameraTypes"
                  :key="value"
                  :label="label.indexOf('-')>-1?label.split('-')[1]:label"
                  :value="value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注：" class="input-width">
              <el-input v-model="cameraJh.note" placeholder="请输入备注内容" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </Dialog>

        <Dialog :cfg="dialogCfg" ref="cameraFB">
          <el-form ref="cameraFBForm" label-width="120px" v-if="Data['type']==='camera'&& Data.stateTwo===2"
                   label-position="top" class="eventInfoBox" :model="fbFormData" :rules="fbRules">
            <el-form-item label="事件信息：">
              <div class="eventInfo">
                <label>位置：</label>{{Data['preData']['road']+' '+Data['preData']['stakeNo']+' '+Data['preData']['name']}}
              </div>
              <div class="eventInfo">
                <label>类型：</label>
                <output>{{dict['camera'][Data['preData']['jhState']]}}</output>
                <label>状态：</label>
                <output>已稽核</output>
                <label>时间：</label>
                <output>{{Data['preData']['detectedTime']}}</output>
              </div>
            </el-form-item>
            <el-form-item label="事件处理：" class="eventInfoBox2" prop="handle">
              <el-select v-model="fbFormData.handle" multiple placeholder="请选择单位" size="mini"  style="width: 100%">
                <el-option
                  v-for="item in orgData.center"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id.toString()">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="处理时限：" prop="expectTimeTwoNum">
              <el-select
                size="mini"
                v-model="fbFormData.expectTimeTwoNum"
                filterable
                default-first-option
                placeholder="请选择处理时限">
                <el-option
                  v-for="item in timeSpaces"
                  :key="item"
                  :label="item+'分钟'"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="备注：" prop="remark2">
              <el-input v-model="fbFormData.remark2"
                        placeholder="请输入备注内容" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </Dialog>

      </div>
    </div>
    <div class="kkModule-sub"></div>
  </div>
</template>

<script>
  import Dialog from 'comp/common/Dialog.vue';
  import FlvPlayer from "kkui/video/FlvPlayer";

  export default {
    name: "WinPanel",
    components: {
      Dialog,
      FlvPlayer
    },
    props: {
      closePanel: {
        default: () => {
        },
        type: Function
      },
      data: {
        default: {},
        type: Object
      }
    },
    data() {
      return {
        kuaisulu:'',
        orgData: {},
        departments2: [],
        selectedDeps: [],
        timeSpace: '',
        timeSpaces:WebCfg['timeSpaces'],
        fbNote: '',


        Data: {},
        mode: 'video',
        webCfg: WebCfg,

        dict: this.$kkui.cache.get('dict'),
        dialogCfg: {
          width: 600,
          height: 400,
          title: '',
          closeShow: !!1,
          footerShow: !!1,
          submit: () => {
          }
        },
        identityId: '',

        units: [],
        curUnit: '',
        departments: [],
        curDepartment: '',
        receive: '',
        receives: [],
        sendBaseFlag: '1',
        note: '',
        evtTypes: '',

        formData: {
          evtType: '',
          note: ''
        },

        fbFormData: {
          // handle: [],
          handle: '',
          expectTimeTwoNum: '5',
          remark2: ''
        },
        fbRules: {
          handle: [
            {required: true, type:'array', message: '事件处理单位不能为空！', change: 'blur'}
          ],
          expectTimeTwoNum: [
            {required: true, message: '处理时限不能为空！', change: 'change'}
          ]
        },

        cameraTypes: this.$kkui.cache.get('dict')['camera'],

        cameraJh: {
          type: '',
          note: ''
        }

      }
    },
    created() {
      this.getDepartments2();
      this.evtTypes = {};
      Object.keys(this.dict['event']).map(key => {
        return {
          key,
          value: this.dict['event'][key]
        }
      }).sort(function (a, b) {
        return b.value.localeCompare(a.value)
      }).forEach(item => {
        this.evtTypes[item.key] = item.value;
      });
      this.identityId = this.$kkui.cache.get('user').identityId;
      this.getOrgData();
    },
    watch: {
      data: {
        handler: function (n, o) {
          this.Data = {...n};
          if (!this.Data.livePath && !this.Data.videoPath) {
            this.mode = 'image';
          } else {
            this.mode = 'video';
          }
        }
      }
    },
    methods: {
      getOrgData() {
        this.$server('org.list').then(data => {
          let orgData = {center: [], base: []};
          data.forEach(item => {
            if (item.name === '各分中心' || item.name==='联动单位') {
              orgData.center = orgData.center.concat(item.children);

              if(item.name==='各分中心'){
                item.children.forEach(item=>{
                  if(item.name==='快速路'){
                    this.kuaisulu=[item.id].toString();
                    console.log(this.kuaisulu);
                  }
                })
              }
            } else {
              orgData.base = orgData.base.concat(item.children)
            }
          });
          this.orgData = orgData;
        })
      },
      selectTimeSpace(e) {
        this.timeSpace = e.target.value;
      },


      getDepartments2() {
        this.$server('org.list').then(data => {
          this.departments2 = [];
          data.forEach(item => {
            if (item.name !== '各分中心') {
              item.children.forEach(itm => {
                this.departments2.push(itm);
              })
            }
          })
        })
      },

      viewBigImg(e) {
        this.$kkui.dialog({
          width: '90%',
          height: '90%',
          cont: `<img src="${e.currentTarget.getAttribute('src')}" style="width:100%; height100%;object-fit:contain;" />`
        })
      },

      // 处理事件
      handleEvt(index) {
        const do1 = () => { // 稽核
          this.formData.note = '';
          this.formData.evtType = this.Data.event;
          this.$refs.dialog.show = true;
          this.dialogCfg.width = 320;
          this.dialogCfg.height = 250;
          this.dialogCfg.title = '稽核';
          this.dialogCfg.submit = () => {
            let _name = this.dict.event[this.formData.evtType];
            if (_name.indexOf('-') > -1) _name = _name.split('-')[1];
            this.$kkui.alert({
              icon: 0,
              cont: '确定稽核此事件为"' + _name + '"吗？',
              callback: () => {
                this.$server('monitor.evtHandle.jihe', {
                  eventTypeTwoCode: this.formData.evtType,
                  note: this.formData.note,
                  id: this.Data.id
                }).then(data => {


                  // 更新liveEvt状态
                  const _dom = this.$parent.$parent.$refs.liveEvt;
                  if (_dom) {

                    if (this.formData.evtType !== '-1') {
                      let _name = this.evtTypes[this.formData.evtType];
                      _name = _name.indexOf('-') > -1 ? _name.split('-')[1] : _name;
                      _dom.changeType(this.Data.id, _name, WebCfg.icons[this.formData.evtType])
                    } else {

                      _dom.deleteLi(this.Data.id)

                    }
                  }

                  this.formData.note = '';
                  this.$parent.delMarker && this.$parent.delMarker(this.Data.id);


                  if (this.formData.evtType !== '-1' && this.Data.preData) {
                    const item = this.Data.preData;
                    item.type = this.formData.evtType;
                    item.state = 2;
                    item.eventTypeTwoCode = this.formData.evtType;
                    const camera = item['bscCamera'];
                    if (camera) {
                      const id = item.id,
                        code = item.state <= 1 ? item['eventTypeTwoCode'] : item['type'],
                        color = WebCfg.eventColor[code],
                        gis = [camera['longitude'], camera['latitude']];
                      let name = this.dict['event'][code];
                      name = name.indexOf('-') > -1 ? name.split('-')[1] : name;

                      this.$parent.addMarker && this.$parent.addMarker({
                        type: 'event',
                        id,
                        name,
                        color,
                        gis,
                        icon: require(`@/assets/img/common/icon/event_${color}.png`),
                        data: {
                          preData: item,
                          id,
                          type: 'event',
                          videoPath: item.videoPath,
                          imagePath: item.imgPath,
                          event: item.code,
                          state: item.state,
                          items: [
                            {
                              key: 'type',
                              label: '类型',
                              value: name,
                              color
                            },
                            {
                              key: 'state',
                              label: '状态',
                              value: this.dict['status'][item.state],
                              color
                            },
                            {
                              key: 'road',
                              label: '路段',
                              value: camera['road'],
                              color
                            },
                            {
                              key: 'pos',
                              label: '位置',
                              value: camera['name'],
                              color
                            },
                            {
                              key: 'detectedTime',
                              label: '时间',
                              value: item['detectedTime'],
                              color
                            }
                          ]
                        },
                      });
                    }
                  }


                  this.Data.state = 2;
                  this.$refs.dialog.show = false;

                  if (this.formData.evtType === '-1') {
                    this.closePanel();
                    if (typeof this.Data.callback === 'function') this.Data.callback();
                    return false;
                  }
                  if (typeof this.Data.callback === 'function') this.Data.callback();


                  let _name = this.dict['event'][this.formData.evtType];
                  _name = _name.indexOf('-') > -1 ? _name.split('-')[1] : _name;
                  this.Data.items[0] = {
                    key: 'type',
                    label: '类型',
                    value: _name
                  };
                  this.Data.items[1] = {
                    key: 'state',
                    label: '状态',
                    value: this.dict['status'][2]
                  };


                  // this.closePanel();
                })
              }
            })
          };
        };

        const do2 = () => {
          this.fbFormData = {
            handle: [this.kuaisulu],
            expectTimeTwoNum: '5',
            remark2: ''
          };
          this.$refs.dialog.show = true;
          this.dialogCfg.width = 600;
          this.dialogCfg.height = 460;
          this.dialogCfg.title = '发布';
          this.dialogCfg.submit = () => {
            this.$refs['fun1Form'].validate((valid) => {
              if (valid) {
                this.$kkui.alert({
                  icon: 0,
                  cont: '确定发布此事件吗？',
                  callback: () => {
                    this.fbFormData.handle= this.fbFormData.handle.map(item=>{
                      return parseInt(item);
                    });
                    this.$server('monitor.evtHandle.fabu', {
                      id: this.Data.id,
                      state: 3,
                      dispatcher: this.$kkui.cache.get('user')['departmentId'],
                      ...this.fbFormData
                    }).then(data => {
                      this.$kkui.msg({
                        icon: 1,
                        cont: '事件发布成功！'
                      });
                      this.receive = '';
                      this.receives = [];
                      this.curDepartment = '';
                      this.departments = [];
                      this.selectedDeps = [];
                      this.timeSpace = '';
                      this.units = [];
                      this.curUnit = '';
                      this.fbNote = '';

                      this.$parent.delMarker && this.$parent.delMarker(this.Data.id);


                      if (this.Data.preData) {
                        const item = this.Data.preData;
                        item.state = 3;

                        const camera = item['bscCamera'];
                        if (camera) {
                          const id = item.id,
                            code = item['eventTypeTwoCode'],
                            color = WebCfg.eventColor[code],
                            gis = [camera['longitude'], camera['latitude']];

                          let name = this.dict['event'][code];
                          name = name.indexOf('-') > -1 ? name.split('-')[1] : name;
                          this.$parent.addMarker && this.$parent.addMarker({
                            type: 'event',
                            id,
                            name,
                            color,
                            gis,
                            icon: require(`@/assets/img/common/icon/event_${color}.png`),
                            data: {
                              preData: item,
                              id,
                              type: 'event',
                              videoPath: item.videoPath,
                              imagePath: item.imgPath,
                              event: item.code,
                              state: item.state,
                              items: [
                                {
                                  key: 'type',
                                  label: '类型',
                                  value: name,
                                  color
                                },
                                {
                                  key: 'state',
                                  label: '状态',
                                  value: this.dict['status'][item.state],
                                  color
                                },
                                {
                                  key: 'road',
                                  label: '路段',
                                  value: camera['road'],
                                  color
                                },
                                {
                                  key: 'pos',
                                  label: '位置',
                                  value: camera['name'],
                                  color
                                }
                              ]
                            },

                          });
                        }
                      }
                      if (typeof this.Data.callback === 'function') this.Data.callback();

                      this.$refs.dialog.show = false;
                      this.closePanel();
                    })
                  }
                })
              }
            });

            // if (this.selectedDeps.length===0) {
            //   this.$kkui.msg({
            //     icon: 0,
            //     cont: '必须选择处理单位！'
            //   });
            //   return false;
            // }
            // if (!this.timeSpace) {
            //   this.$kkui.msg({
            //     icon: 0,
            //     cont: '必须选择处理时限！'
            //   });
            //   return false;
            // }


          };


        };

        const do3 = () => {
          this.$kkui.alert({
            icon: 0,
            cont: '确定忽略发布此事件吗？',
            callback: () => {
              this.$server('monitor.evtHandle.hulve', {
                id: this.Data.id,
                state: 0,
                pushInterface: false
              }).then(data => {
                this.$kkui.msg({
                  icon: 1,
                  cont: '事件忽略成功！'
                });
                this.$refs.dialog.show = false;
                this.$parent.delMarker && this.$parent.delMarker(this.Data.id);

                if (this.Data.preData) {
                  const item = this.Data.preData;
                  item.state = 0;

                  const camera = item['bscCamera'];
                  if (camera) {
                    const id = item.id,
                      code = item['eventTypeTwoCode'],
                      color = WebCfg.eventColor[code],
                      gis = [camera['longitude'], camera['latitude']];

                    let name = this.dict['event'][code];
                    name = name.indexOf('-') > -1 ? name.split('-')[1] : name;

                    const _cfg = {
                      type: 'event',
                      id,
                      name,
                      color,
                      gis,
                      icon: require(`@/assets/img/common/icon/event_${color}.png`),
                      data: {
                        preData: item,
                        id,
                        type: 'event',
                        videoPath: item.videoPath,
                        imagePath: item.imgPath,
                        event: item.code,
                        state: item.state,
                        items: [
                          {
                            key: 'type',
                            label: '类型',
                            value: name,
                            color
                          },
                          {
                            key: 'state',
                            label: '状态',
                            value: this.dict['status'][item.state],
                            color
                          },
                          {
                            key: 'road',
                            label: '路段',
                            value: camera['road'],
                            color
                          },
                          {
                            key: 'pos',
                            label: '位置',
                            value: camera['name'],
                            color
                          },
                          {
                            key: 'detectedTime',
                            label: '时间',
                            value: item['detectedTime'],
                            color
                          }
                        ]
                      },

                    };

                    if (code === '002-007-002') {
                      _cfg.data.items.splice(2, 0, {
                        key: 'visiable',
                        label: '能见度',
                        value: item['distance'] + '米',
                        color
                      })
                    }
                    this.$parent.addMarker && this.$parent.addMarker(_cfg);
                  }
                }


                if (typeof this.Data.callback === 'function') this.Data.callback();
                this.closePanel();
              })
            }
          })
        };

        [do1, do2, do3][index]();

      },

      changeUnit() {
        this.$server('org.department', {
          company: this.curUnit,
        }).then(data => {
          this.curDepartment = '';
          this.receive = '';
          this.departments = data;
        })
      },

      changeDepartment() {
        this.$server('org.user', {
          company: this.curUnit,
          department: this.curDepartment
        }).then(data => {
          this.receive = '';
          this.receives = data;
        })
      },

      sendRepairOrder(type) {
        if (type === 2) {
          this.cameraJh.type = this.data.preData.state;
          this.dialogCfg.width = 320;
          this.dialogCfg.height = 240;
          this.dialogCfg.title = '稽核';
          this.$refs.cameraDialog.show = 1;
          this.dialogCfg.submit = () => {
            this.$kkui.alert({
              icon: 0,
              cont: '确定稽核此事件为"' + this.dict['camera'][this.cameraJh.type] + '"吗？',
              callback: () => {
                this.$server('camera.jihe', {
                  jhState: this.cameraJh.type,
                  id: this.Data.id
                }).then(data => {
                  if (this.cameraJh.type === '0') {
                    this.Data.state = this.cameraJh.type;
                    this.Data.stateTwo = null;
                  } else {
                    this.Data.state = this.cameraJh.type;
                    this.Data.stateTwo = 2;
                  }


                  if (this.Data.preData) {
                    const item = this.Data.preData;
                    item.stateTwo = this.cameraJh.type === '0' ? null : 2;
                    item.jhState = this.cameraJh.type;
                    if (this.cameraJh.type === '0') item.state = '0';

                    let color = '';
                    if (item.state === '0') {
                      color = '#1296DB';
                    } else if (item.state === '-1') {
                      color = '#C90AF2';
                    } else {
                      color = WebCfg['eventColor'][item['state']];
                    }
                    const id = item.id,
                      gis = [item['longitude'], item['latitude']];


                    const _cfg = {
                      type: 'camera',
                      id,
                      color,
                      gis,
                      icon: require(`@/assets/img/common/icon/camera_${color}.png`),
                      labelHide: true,
                      data: {
                        preData: item,
                        id,
                        type: 'camera',
                        imagePath: item['imgPath'],
                        livePath: WebCfg.lineMode === 1 ? item['videoAddress'] : 'ws:' + WebCfg.api['wsUrl'] + ':' + WebCfg.api.wsPort + '/' + item['videoAddress'],
                        // livePath:  'ws:'+WebCfg.api['wsUrl]+':'+(WebCfg.api.wsPort+parseInt(idx/4))+'/'+item['videoAddress'],
                        // livePath:  'ws://172.16.16.50:11507/'+item['videoAddress'],
                        state: item.state,
                        stateTwo: 2,
                        items: [
                          {
                            key: 'type',
                            label: '类型',
                            value: this.dict['camera'][item.jhState],
                            color
                          },
                          {
                            key: 'state',
                            label: '状态',
                            value: item.stateTwo ? this.dict['status'][item.stateTwo] : '正常',
                            color
                          },
                          {
                            key: 'road',
                            label: '路段',
                            value: item['road'],
                            color
                          },
                          {
                            key: 'pos',
                            label: '位置',
                            value: item['road'] + ' ' + item['stakeNo'] + ' ' + item['name'],
                            color
                          }
                        ]
                      },
                    };
                    this.$parent.delMarker && this.$parent.delMarker(this.Data.id);

                    this.$parent.addMarker && this.$parent.addMarker(_cfg)
                  }

                  let _name = this.dict['camera'][this.cameraJh.type];
                  _name = _name.indexOf('-') > -1 ? _name.split('-')[1] : _name;
                  this.Data.items[0] = {
                    key: 'type',
                    label: '类型',
                    value: _name
                  };
                  this.Data.items[1] = {
                    key: 'state',
                    label: '状态',
                    value: this.dict['status'][2]
                  };

                  if (typeof this.Data.callback === 'function') this.Data.callback();
                  this.$refs.cameraDialog.show = false;
                  if (this.cameraJh.type === '0') {
                    this.closePanel();
                  }

                })
              }
            });
          }
        } else if (type === 3) {
          this.fbFormData = {
            handle: [this.kuaisulu],
            expectTimeTwoNum: '5',
            remark2: ''
          };
          this.$refs.cameraFB.show = true;
          this.dialogCfg.width = 600;
          this.dialogCfg.height = 460;
          this.dialogCfg.title = '发布';
          this.dialogCfg.submit = () => {
            this.$refs['cameraFBForm'].validate((valid) => {
              if (valid) {
                this.$kkui.alert({
                  icon: 0,
                  cont: '确定发布此事件吗？',
                  callback: () => {
                    this.$server('camera.fabu', {
                      id: this.Data.id,
                      state: 3,
                      dispatcher: this.$kkui.cache.get('user')['departmentId'],
                      ...this.fbFormData
                    }).then(data => {
                      this.$kkui.msg({
                        icon: 1,
                        cont: '事件发布成功！'
                      });

                      if (this.Data.preData) {
                        const item = this.Data.preData;
                        item.stateTwo = 3;
                        let color = '';
                        if (item.state === '0') {
                          color = '#1296DB';
                        } else if (item.state === '-1') {
                          color = '#C90AF2';
                        } else {
                          color = WebCfg['eventColor'][item['state']];
                        }
                        const id = item.id,
                          gis = [item['longitude'], item['latitude']];


                        const _cfg = {
                          type: 'camera',
                          id,
                          color,
                          gis,
                          icon: require(`@/assets/img/common/icon/camera_${color}.png`),
                          labelHide: true,
                          data: {
                            preData: item,
                            id,
                            type: 'camera',
                            imagePath: item['imgPath'],
                            livePath: WebCfg.lineMode === 1 ? item['videoAddress'] : 'ws:' + WebCfg.api['wsUrl'] + ':' + WebCfg.api.wsPort + '/' + item['videoAddress'],
                            // livePath:  'ws:'+WebCfg.api['wsUrl]+':'+(WebCfg.api.wsPort+parseInt(idx/4))+'/'+item['videoAddress'],
                            // livePath:  'ws://172.16.16.50:11507/'+item['videoAddress'],
                            state: item.state,
                            stateTwo: 3,
                            items: [
                              {
                                key: 'type',
                                label: '类型',
                                value: this.dict['camera'][item.jhState],
                                color
                              },
                              {
                                key: 'state',
                                label: '状态',
                                value: this.dict['status'][item.stateTwo],
                                color
                              },
                              {
                                key: 'road',
                                label: '路段',
                                value: item['road'],
                                color
                              },
                              {
                                key: 'pos',
                                label: '位置',
                                value: item['road'] + ' ' + item['stakeNo'] + ' ' + item['name'],
                                color
                              }
                            ]
                          },
                        };
                        this.$parent.delMarker && this.$parent.delMarker(this.Data.id);

                        this.$parent.addMarker && this.$parent.addMarker(_cfg)
                      }

                      if (typeof this.Data.callback === 'function') this.Data.callback();
                      this.$refs.cameraFB.show = false;
                      this.closePanel();
                    })
                  }
                })
              }
            });
          };
        } else if (type === 0) {
          this.$kkui.alert({
            icon: 0,
            cont: '确定忽略发布此事件吗？',
            callback: () => {
              this.$server('camera.hl', {
                id: this.Data.id
              }).then(data => {
                this.$kkui.msg({
                  icon: 1,
                  cont: '事件忽略成功！'
                });

                this.closePanel();
                if (this.Data.preData) {
                  const item = this.Data.preData;
                  item.stateTwo = 0;
                  let color = '';
                  if (item.state === '0') {
                    color = '#1296DB';
                  } else if (item.state === '-1') {
                    color = '#C90AF2';
                  } else {
                    color = WebCfg['eventColor'][item['state']];
                  }
                  const id = item.id,
                    gis = [item['longitude'], item['latitude']];


                  const _cfg = {
                    type: 'camera',
                    id,
                    color,
                    gis,
                    icon: require(`@/assets/img/common/icon/camera_${color}.png`),
                    labelHide: true,
                    data: {
                      preData: item,
                      id,
                      type: 'camera',
                      imagePath: item['imgPath'],
                      livePath: WebCfg.lineMode === 1 ? item['videoAddress'] : 'ws:' + WebCfg.api['wsUrl'] + ':' + WebCfg.api.wsPort + '/' + item['videoAddress'],
                      // livePath:  'ws:'+WebCfg.api['wsUrl]+':'+(WebCfg.api.wsPort+parseInt(idx/4))+'/'+item['videoAddress'],
                      // livePath:  'ws://172.16.16.50:11507/'+item['videoAddress'],
                      state: item.state,
                      stateTwo: 0,
                      items: [
                        {
                          key: 'type',
                          label: '类型',
                          value: this.dict['camera'][item.jhState],
                          color
                        },
                        {
                          key: 'state',
                          label: '状态',
                          value: this.dict['status'][item.stateTwo],
                          color
                        },
                        {
                          key: 'road',
                          label: '路段',
                          value: item['road'],
                          color
                        },
                        {
                          key: 'pos',
                          label: '位置',
                          value: item['road'] + ' ' + item['stakeNo'] + ' ' + item['name'],
                          color
                        }
                      ]
                    },
                  };
                  if(typeof this.Data.callback ==='function') this.Data.callback();
                  this.$parent.delMarker && this.$parent.delMarker(this.Data.id);

                  this.$parent.addMarker && this.$parent.addMarker(_cfg)
                }


              })
            }
          })
        }
      }
    },
    beforeDestroy() {
      const videos = document.querySelectorAll('video');
      if (videos.length > 0) {
        videos.forEach(video => {
          video.currentTime = 0.0;
          video.pause();

          video.setAttribute('src', '');
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .input-width .el-input--mini input.el-input__inner {
    width: 195px;
  }

  .winPanel {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -325px;
    margin-top: -133px;
    border: 1px solid rgba(10, 183, 255, .48);
    background-color: rgba(6, 29, 47, .95);
    width: 650px;
    height: 266px;
    z-index: 100;
    box-sizing: border-box;

    .title {
      height: 24px;
      line-height: 24px;
      margin: 0 15px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(10, 183, 255, .1);
      display: flex;

      .button {
        width: 80px;
        height: 24px;
        background: url("~img/common/panel_title_bg.png") center center no-repeat;
        opacity: .3;
        text-align: center;
        font-size: 13px;
        color: #ccc;
        cursor: pointer;
      }

      .button.active, .button:hover {
        opacity: .8;
      }

      .close {
        margin-left: auto;
        color: var(--menu-border-color);
        font-size: 18px;
        cursor: pointer;
        opacity: .5;
        border: 2px solid var(--menu-border-color);
        height: 20px;
        line-height: 18px;
        width: 20px;
        text-align: center;
        border-radius: 50%;
        transition: all .2s ease-in-out;
      }

      .close:hover {
        opacity: 1;
        transform: rotate(90deg);
      }

    }

    .content {
      padding: 15px;
      display: flex;
      gap: 10px;
      align-items: center;

      .win {
        width: calc(160px * 1.9);
        height: calc(90px * 1.9);
        background-color: rgba(0, 0, 0, .5);
        box-sizing: border-box;
        cursor: pointer;

        .video, .image, .video video, .image img {
          width: 100%;
          height: 100%;
        }
      }

      .cont {
        flex: 1;
        font-size: 14px;
        color: #999;
        overflow: hidden;

        .item-ul {
          font-size: 13px;

          li {
            list-style: disc;
            margin-left: 10px;
            line-height: 20.5px;
            border-bottom: 1px dashed rgba(10, 183, 255, .1);
            overflow: hidden;
            display: flex;

            label {
              opacity: .5;
              color: #aaa;
              width: 40px;
              text-align: justify;
              text-align-last: justify;
            }

            span:first-child {
              text-align: left;
            }

            span:last-child {
              flex: 1;
              overflow: hidden;

            }

            .red {
              color: red
            }
          }

          li.pos span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          li.state {
            color: var(--font-blue-color);
          }

          li:last-child {
            list-style: none;
            border-bottom: none;
            padding-top: 5px;
          }

          li.btn > div {
            display: flex;
            padding-top: 5px;
            width: 100%;
            gap: 20px;
            justify-content: space-between;
            height: 30px;
            line-height: 30px;

            button {
              flex: 1;
              font-size: 14px;
            }
          }
        }


      }

      .eventInfoBox {
        padding: 0 5px;
      }

      .eventInfo {
        /*display: flex;*/
        /*justify-content: space-between;*/
        /*line-height: 24px;*/
        line-height: 24px;

        label {
          color: #828282;
          margin-left: 28px;
        }
      ;

        output {
          color: #404040
        }
      ;

        span {
          width: 30%;
          display: inline-block;
          overflow: hidden;

        }

        span:last-child {
          width: 40%;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

      }
    }

    /deep/ .el-form .el-form-item:last-child {
      margin-bottom: 20px;
    }

    /deep/ .el-form-item__label {
      font-weight: 600;
    }

    /deep/ .el-form-item {
      margin-bottom: 20px;
    }

    /deep/ .eventInfoBox2 .el-form-item__content {
      display: flex;
    }

    /deep/ .eventInfoBox .el-form-item__label {
      width: 100%;
      line-height: 24px;
      padding: 0;
    }


  }


</style>
